<template>
    <WidgetContainer :widget-id="config.id">
        <el-card class="card-container" :class="config.attributes?.cssClass" v-show="!config.attributes.hidden" :header="config.attributes.headerTitle"
            :shadow="config.attributes.cardShadow">
            <draggable v-model="config.children" group="form" item-key="id" @add="onAdd" class="card-draggable" :animation="150">
                <template #item="{ element: child }">
                    <component :is="designer.renderComponent(child)" :config="child" />
                </template>
            </draggable>
        </el-card>
    </WidgetContainer>
</template>

<script setup>
import { inject } from 'vue'
import { ElCard } from 'element-plus'
import draggable from 'vuedraggable'

const designer = inject('designer')
const selectWidgetId = inject('selectWidgetId')

const onAdd = (evt) => {
    selectWidgetId.value = evt?.item?._underlying_vm_?.id || selectWidgetId.value
};

defineProps({
    config: {
        type: Object,
        required: true
    }
})
</script>

<style scoped>
.card-container {
    margin: 5px 0;
}

.card-draggable {
    min-height: 100px;
}
</style>